<template>
  <div>
    <div class="card">
      <img :src="competition.coverImage" alt="" class="cover" />
      <div class="msg">
        <div class="title">{{ competition.title }}</div>
        <div class="content">{{ competition.content }}</div>
        <div>
          <p class="time-msg">比赛时间: {{ competition.competitionTime }}</p>
          <p class="time-msg">
            报名截止时间: {{ competition.registrationDeadline }}
          </p>
        </div>
      </div>
			
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, watch, onMounted } from "vue";

const props = defineProps({
  competition: {
    type: Object,
    required: true,
  },
});
</script>

<style scoped>
/* 竞赛卡片 */
.card {
  position: relative;
  display: flex;
  align-items: flex-start;
  width: 100%;
  height: 180px;
  padding-top: 20px;
  padding-bottom: 20px;
  margin-top: 10px;
  background-color: white;
  border-bottom: 1px solid #d3d3d3;
}

/* 封面图片 */
.cover {
  width: 140px;
  height: 100%;
}

.msg {
  margin-left: 20px;
}

/* 标题 */
.title {
  max-width: 520px;
  overflow: hidden;
  font-size: 18px;
  line-height: 24px;
  color: #000;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content {
  display: -webkit-box;
  margin-top: 10px;
  margin-top: 15px;
  overflow: hidden;
  font-size: 14px;
  color: #666;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.time-msg {
  display: -webkit-box;
  margin-top: 10px;
  margin-top: 15px;
  overflow: hidden;
  font-size: 14px;
  color: #666;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.icon {
  width: 20px;
  height: 20px;
  margin-bottom: -5px;
}

.right {
  position: absolute;
  top: 30px;
  right: 10px;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}
</style>
